// 放置全局指令      判断按钮权限

// import Vue from 'vue'
import store from '@/store'

// Vue.directive('checkBtn', {
//   // el: 指令绑定的那个元素对象 dom
//   // binding.value:  指令等于号后面绑定的表达式的值  v-if="xxx"
//   inserted(el, binging) {
//     // 拿到用户已绑定的按钮权限数据
//     const points = store.state.user.userInfo.roles.points

//     // 判断当前的按钮自身的权限标识能否在后端返回的points中找到
//     if (!points.includes(binging.value)) {
//       // 把当前的按钮移除
//       // 移除eldom 1. remove()  2. 先找到父节点 removeChild
//       el.parentNode.removeChild(el)
//       // 会有兼容性问题
//       el.remove()
//     }
//   }
// })

// 思考一下如何把当前的写法改造成插件的写法？

const directivePlugin = {
  install(Vue) {
    Vue.directive('checkBtn', {
      inserted(el, binding) {
        // el: 指令绑定的那个元素对象 dom
        // binding.value:  指令等于号后面绑定的表达式的值  v-if="xxx"
        console.log(el, binding.value)
        // 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
        // 控制逻辑: 判断当前的按钮自身的权限标识能否在后端返回的points中找到 如果找到 证明要显示
        // 如果找不到 证明要隐藏
        // 1. 权限数据 -> points  2. binding.value -> 按钮自身的标识
        const points = store.state.user.userInfo.roles.points
        if (!points.includes(binding.value)) {
          // 把当前的按钮移除
          // 移除eldom 1. remove()  2. 先找到父节点 removeChild
          el.parentNode.removeChild(el)
          //       // 会有兼容性问题
          //       el.remove()
        }
      }
    })
  }

}

export default directivePlugin
